watch 数据监听
监听事件
Vue 3 提供了两个重要的 API 来处理响应式数据:watchEffect()
和 watch()
。
watchEffect()
watchEffect()
是一个用于监听响应式数据变化的 API。它会立即执行传入的回调函数,并自动追踪其中使用的响应式数据,当响应式数据变化时,回调函数会被再次执行。
以下是一个示例:
vue
<template>
<div>
<h1>{{ message }}</h1>
<button @click="changeMessage">改变消息</button>
</div>
</template>
<script setup>
import { ref, watchEffect } from "vue";
const message = ref("Hello, Vue 3!");
const changeMessage = () => {
message.value = "Hello, World!";
};
watchEffect(() => {
console.log(`消息发生变化: ${message.value}`);
});
</script>
示例中创建了一个名为 message
的响应式变量,并在页面中渲染了这个变量的值。每当用户点击 "改变消息" 按钮时,message
的值都会改变,并且 watchEffect()
中的回调函数会被触发。
注意事项:
watchEffect()
中的回调函数会在组件初始化时被执行一次,以及在其中使用的响应式数据发生变化时被再次执行。watchEffect()
自动追踪所使用的响应式数据,无需手动声明依赖。
watch()
watch()
是一个更精确控制的 API,它可以监听指定的响应式数据,并在数据变化时执行回调函数。 与 watchEffect()
不同,watch()
需要指定要监听的响应式数据,并手动声明依赖关系。以下是一个示例:
vue
<template>
<div>
<h1>{{ message }}</h1>
<input v-model="inputValue" placeholder="输入新消息" />
</div>
</template>
<script setup>
import { ref, watch } from "vue";
const message = ref("Hello, Vue 3!");
const inputValue = ref("");
watch(inputValue, (newValue, oldValue) => {
message.value = newValue;
console.log(`输入框的值发生变化: ${newValue}`);
});
</script>
示例中创建了一个双向绑定的输入框,并声明了一个名为 inputValue
的变量来存储输入框的值。通过 watch()
监听 inputValue
的变化,并在回调函数中将新值赋给 message
变量。
注意事项:
watch()
第一个参数可以是一个响应式数据、计算属性或 ref 对象。watch()
第二个参数是一个回调函数,接收新值和旧值作为其参数。
提示
- 在
watchEffect()
或watch()
中定义的变量必须是通过ref()
包裹的响应式数据。 ref()
返回一个包装过的 Proxy 对象,访问和修改它的值时,需要使用.value
来获取和设置真实的值。